<template>
	<div class="roles">
		<div class="header">
			<el-button v-has="'sys-log-delete'" type="danger" @click="handleDelete(ids)">批量删除</el-button>
			<div class="search" style="display: inline-block">
				<el-input v-model="search.username" style="width:200px" placeholder="请输入手机号" clearable
					@clear="searchClick"/>
				<el-input v-model="search.operation" style="width:200px" placeholder="请输入用户动作" clearable
					@clear="searchClick"/>
				<el-date-picker v-model="time" type="daterange" @change="changeTime" value-format="yyyy-MM-dd"
					start-placeholder="开始日期" end-placeholder="结束日期" clearable></el-date-picker>
			</div>
			<el-button type="primary" @click="searchClick">搜索</el-button>
		</div>
		<component-table :data="tableData">
			<template v-slot:index="{scope}" width="50">
				<span>{{(search.pageNum-1)*search.pageSize + (scope.$index+1)}}</span>
			</template>
			<template v-slot:button="{scope}">
				<component-popover v-has="'sys-log-delete'" :params="scope.row" @ok="handleOk"></component-popover>
			</template>
		</component-table>
	</div>
</template>

<script>
	import {
		getTableData,
		del
	} from '@/api/sys/log'

	export default {
		name: "component-user",
		data() {
			return {
				show: false,
				showTable: {
					showTableAdd: false,
					showTableEdit: false,
					showTableauth: false,
				},
				tableDataAll: null,
				optionText: '',
				time: [],
				search: {
					pageNum: 1, //当前页
					pageSize: 10, //每页显示条数
					username: '',
					operation: '',
					startTime: '',
					endTime: '',
					ordList: []
				},
				ids: [],
				visible: false,
				ordMap: {},
				tableData: {
					loading: false,
					border: true,
					// 请求回来的数据
					tableData: [],
					// 列
					tableLabel: [],
					// 操作
					tableOption: {
						label: '操作',
						width: 120,
						slot: true,
					},
					// 分页
					page: {
						align: 'right',
						total: 1,
						size: 10,
						layout: 'total, sizes, prev, pager, next, jumper',
						currentPage: 1,
						currentChange: (currentPage) => {
							this.$nextTick(() => {
								this.search.pageNum = currentPage;
								this.tableDataInit(this.search);
							})
						},
						sizeChange: (val) => { // 不需要可去掉
							this.search.pageSize = val;
							this.tableDataInit(this.search);
						}
					},
					// 排序
					sortChange: (obj, tableObject) => {
						this.ordMap[obj.prop] = obj.order;
						let ordList = [];
						for (let key in this.ordMap) {
							ordList.push({
								prop: key,
								order: this.ordMap[key]
							})
						}
						this.search.ordList = ordList;
						this.searchClick()
					},
					// 表格实现多选时的 change 事件
					selectionChange: (params) => {
						this.ids = [];
						params.map(item => this.ids.push(item.id));
					}
				}
			}
		},
		created() {
			this.labelInit();
			// this.tableDataInit(this.tableData.page.currentPage,pageOffset);
			this.handleGetTableData();
		},
		methods: {
			handleGetTableData(loading = true) {
				this.handleTable();
				loading && this.tableDataInit(this.search);
			},
			searchClick() {
				this.search.pageNum = 1;
				this.tableDataInit(this.search);
			},
			indexMethod(index) {
			},
			// 列初始化
			labelInit() {
				this.tableData.tableLabel = [{
						type: 'selection',
						width: 40,
						fixed: 'left',
						align: 'center'
					},
					{
						// type: 'index',
						title: '序号',
						fixed: 'left',
						width: 60,
						align: 'center',
						slot: 'index'
					},
					{
						prop: 'creator',
						title: '用户名',
						width: 116,
					},
					{
						prop: 'operation',
						title: '用户操作',
						minWidth: 150,
						showOverflowTooltip: true,
					},
					{
						prop: 'time',
						title: '响应(毫秒)',
						width: 100
					},
					{
						prop: 'method',
						title: '请求方法',
						minWidth: 150,
						showOverflowTooltip: true,
					},
					{
						prop: 'params',
						title: '请求参数',
						width: 200,
						showOverflowTooltip: true,
					},
					{
						prop: 'ip',
						title: 'IP地址',
						width: 120,
					},
					{
						prop: 'createTime',
						title: '操作时间',
						width: 160,
						render: (params, col) => [this.formatTime(params.row.createTime)],
					},
				];
			},
			// 数据初始化
			tableDataInit(search) {
				this.tableData.loading = true;

				this.request(getTableData, search, this, data => {
					this.tableData.loading = false;
					this.tableData.tableData = data.records;
					this.tableData.page.total = data.total;
					this.tableData.page.currentPage = data.current;
				}, false);
			},
			handleTable(flag = false, type = '', text = '新增用户') {
				this.objectForIn(this.showTable, false);
				this.optionText = text;
				this.show = flag;
				this.showTable[type] = flag;
			},
			/****************************** 操作 ******************************/
			handleAuth(params) {
				this.$nextTick(async () => {
					await this.handleTable(true, 'showTableAuth', '角色管理');
					this.$refs.tableAuth && this.$refs.tableAuth.currentData(params.row)
				})
			},
			handleEdit(params) {
				this.$nextTick(async () => {
					await this.handleTable(true, 'showTableEdit', '编辑用户');
					this.$refs.tableEdit && this.$refs.tableEdit.currentData(params.row)
				})
			},
			handleOk(params) {
				this.requestDelete([params.id]);
			},
			handleDelete(ids) {
				if (this.ids.length === 0) return this.error('请先选择');
				this.alert('确定要删除吗？', () => this.requestDelete(this.ids));
			},
			requestDelete(ids) {
				this.request(del, ids, this, data => {
					(this.tableData.tableData.length === 1 && this.search.pageNum > 1) && (--this.search.pageNum);
					this.handleGetTableData();
					this.ids.length = 0;
				});
			},
			changeTime(val) {
				//console.log(val)
				if (val) {
					this.search.startTime = val[0] + " 00:00:00";
					this.search.endTime = val[1]  + " 23:59:59";
				} else {
					this.search.startTime = '';
					this.search.endTime = '';
				}
				this.searchClick()
			}
		},
	}
</script>

<style lang="css" scoped>

</style>
